<template>
  <div class="coffee-item" @click="goToDetail(coffeeData)">
    <div class="img-container">
      <img :src="coffeeData.image" alt="Coffee" class="img-wrap" />
    </div>
    <div class="price">{{ coffeeData.price }}</div>
    <div class="chinese-name">{{ coffeeData.chineseName }}</div>
  </div>
</template>

<script>
export default {
  props: ["coffeeData"],
  data() {
    return {
      isActive: false // 用于跟踪是否点击了该项目
    };
  },
  methods: {
    goToDetail(coffeeData) {
      this.$router.push({ name: 'SessionDetail', params: { id: coffeeData.id } });
      this.isActive = true;
    }
  }
};
</script>

<style scoped>
.coffee-item {
  background-color: white; 
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  transition: box-shadow 0.3s;
}

.coffee-item.active,
.coffee-item:active {
  box-shadow: 0 4px 12px rgba(139, 69, 19, 0.5);
}

.img-container {
  width: 250px;
  height: auto;
  overflow: hidden; 
  border-radius: 10px;
  background-color:#d3c0a9;
}

.img-wrap {
  width: 100%; 
  height: auto;
  display: block;
}

.price,
.chinese-name {
  margin-top: 10px; 
  text-align: center; 
}
</style>
